$(document).ready(function()//When the dom is ready 

{
$("#username").change(function() 
{ //if theres a change in the username textbox

var username = $("#username").val();//Get the value in the username textbox
if(username.length > 3)//if the lenght greater than 3 characters
{
	$("#availability_status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');
	//Add a loading image in the span id="availability_status"

	$.ajax({  //Make the Ajax Request
		type: "POST",  
		url: "checkforusername.php",  //file name
    data: "username="+ username,  //data
    success: function(server_response){  
   
   $("#availability_status").ajaxComplete(function(event, request){ 

	if(server_response == '0')//if ajax_check_username.php return value "0"
	{ 
	$("#availability_status").html('<img src="available.png" align="absmiddle"> <font color="Green"> Available </font>  ');
	//add this image to the span with id "availability_status"
	}  
	else  if(server_response == '1')//if it returns "1"
	{  
	 $("#availability_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Not Available </font>');
	}  
   
   });
   } 
   
  }); 
}
else
{

$("#availability_status").html('<font color="#cc0000">Username too short</font>');
//if in case the username is less than or equal 3 characters only 
}



return false;
});

$("#password").change(function() 
{ //if theres a change in the username textbox

var password = $("#password").val();//Get the value in the username textbox
var retype = $("#rpass").val();
$("#password_status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking for errors...');
if(password.length < 6)//if the length is less than 6 characters
{
$("#password_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Password must have more than 6 characters.</font>');
}
else 
{
$("#password_status").html('<img src="available.png" align="absmiddle">');
}
  }); 

 $("#rpass").change(function() 
{ //if theres a change in the username textbox

var password = $("#password").val();//Get the value in the username textbox
var rpass = $("#rpass").val();
$("#retype_status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking for errors...');

if(password != rpass)//if the length is less than 6 characters
{
$("#retype_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Passwords do not match.</font>');
}
else if (password == rpass && rpass !="")
{
$("#retype_status").html('<img src="available.png" align="absmiddle">');
}
  }); 
  
  
$("#email").change(function() 
{ //if theres a change in the username textbox

var email = $("#email").val();//Get the value in the username textbox
function IsValidEmail(email)
{
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
return filter.test(email);
}
if (!IsValidEmail(email))
{
$("#email_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Invalid email.</font>');

}
else if (IsValidEmail(email))
{
$("#email_status").html('<img src="available.png" align="absmiddle">');
}
 }); 

$("#blockName").change(function()
{
	var blockName = $("#blockName").val();
	
	if (blockName == "")
	{
		$("#name_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Please enter the name of the block.</font>');
		
	}
	else
	{
		$("#name_status").html('<img src="available.png" align="absmiddle">');
	}
	return false;
	
});


  
$("#submitReg").click(function() 
{ //if theres a change in the username textbox

var username = $("#username").val();
var password = $("#password").val();
var rpass = $("#rpass").val();
var email = $("#email").val();
var error = false;

if (username == "")
{
$("#availability_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Please enter a username.</font>');
error = true;
}
if (password == "")
{
$("#password_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Please enter a password.</font>');
error = true;
}
if (rpass == "")
{
$("#retype_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Please retype your password.</font>');
error = true;
}
if (email == "")
{
$("#email_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Please enter an email address.</font>');
error = true;
}

if (error == false) {

	$.ajax({  //Make the Ajax Request
    type: "POST",  
    url: "insert.php",  //file name
    data: "username="+username+"&password="+password+"&email="+email,  //data
    success: function(server_response){  
   
			$("#register").ajaxComplete(function(event, request){ 

					$("#register").html('REGISTRATION SUCCESSFUL.');

			});
   } 
   
  }); 
}
return false;




  }); 
  
 
});